<script lang="ts" setup>
import Header from "@/layouts/index/Header.vue"
import Main from "@/layouts/index/Main.vue"
import Footer from "@/layouts/index/Footer.vue"
</script>

<template>
  <t-space class="t-space" direction="vertical">
    <t-layout>
      <t-affix>
        <t-header>
          <Header />
        </t-header>
      </t-affix>
      <t-content class="content">
        <Main/>
      </t-content>
      <t-footer class="footer">
        <Footer />
      </t-footer>
    </t-layout>
  </t-space>

</template>

<style lang="less" scoped>
@footer-height: var(--td-comp-size-xxl);
.t-space {
  width: 100vw;
  height: 100vh;
  .content{
    min-height: calc(100vh - 2 * @footer-height);
  }

  .footer {
    height: @footer-height;
    padding: 0;
  }
}
</style>
